<template>
  <div>
    <h2 class="title">测一测</h2>
    <div class="container">
      <div class="body">
        <div class="leftBody"><TableMenu @updateData="handleUpdateData"></TableMenu></div>
        <div class="rightBody">
          <div class="list  ">
            <div>
              <TextCard :textMessage="selectedData"/>
              <div v-for="item in selectedData.table" :key="item.name">
                <TableCard :tableMessage="item"></TableCard>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import TableCard from "./components/TableCard.vue";
import TextCard from "./components/TextCard.vue";
import TableMenu from "./components/TableMenu.vue";
const selectedData = ref({  
  text: null, // 用于 TextCard 的文本
  table: [] // 用于 TableCard 的数据项数组  
});


const handleUpdateData = (tableData) =>{
  selectedData.value=tableData.value;
}

</script>

<script>
/**
 * 测试页
 * 负责人：邹峻丰
 */
export default {
  name: "Test",
};
</script>

<style scoped>
.title {
  margin-top: 20px;
  font-size: 20px;
  text-align: center;
}
.container {
  box-sizing: border-box;
  width: 100%;
  max-width: 840px;
  margin-right: auto;
  margin-left: auto;
}

.body {
  position: absolute;
  display: flex;
  flex-direction: row;
  padding-top: 10px;
  margin: 10px;
  overflow: hidden;
}

.leftBody {
  display: block;
  width: auto;
  height: 100%;
  margin: 10px;
  margin-top: 20px;
}
.rightBody {
  display: block;
  width: auto;
  height: 100%;
}
.list {
  display: flex;
  flex-direction: column;
  max-width: 700px;
}
</style>
